<template>
  <div class="header">
    <div class="head">
      <h2></h2>
      <h1>1222</h1>
    </div>
    <div class="order">
      <div class="order-text">
        <p>我的订单</p>
        <div>
          <h3>全部订单</h3>
          <img src="../../../src/assets/img/1.png" alt="">
        </div>
      </div>
      <ul class="order-con">
        <li>
          <van-icon name="shopping-cart-o" size="25"/>
          <p>代付款</p>
        </li>
        <li>
          <van-icon name="after-sale" size="25"/>
          <p>优惠券</p>
        </li>
        <li>
          <van-icon name="star" size="25"/>
          <p>收藏</p>
        </li>
      </ul>
      <div class="conter">
        <div class="list">
          <div class="list-icon">
            <van-icon name="like-o" size="25" color="#FF6600"/>
            <div class="list-con">
              <p>会员中心</p>
              <van-icon name="arrow" size="20" color="#00000"/>
            </div>
          </div>
          <router-link to="/address">
            <div class="list-icon1">
              <van-icon name="location-o" size="25" color="#FF6600"/>
              <div class="list-con">
                <p>收货地址</p>
                <van-icon name="arrow" size="20"/>
              </div>
            </div>
          </router-link>
        </div>
        <div class="list">
          <div class="list-icon">
            <van-icon name="after-sale" size="25" color="#FF6600"/>
            <div class="list-con">
              <p>我的优惠</p>
              <van-icon name="arrow" size="20"/>
            </div>
          </div>
          <div class="list-icon1">
            <van-icon name="chat-o" size="25" color="#FF6600"/>
            <div class="list-con">
              <p>我的意见</p>
              <van-icon name="arrow" size="20"/>
            </div>
          </div>
        </div>
        <div class="list1">
          <div class="list-icon">
            <van-icon name="qr" size="25" color="#FF6600"/>
            <div class="list-con">
              <p>我的名片</p>
              <van-icon name="arrow" size="20"/>
            </div>
          </div>
        </div>
       <div class="list1">
         <div class="list-icon">
           <van-icon name="clock-o" size="25" color="#FF6600"/>
           <div class="list-con">
             <p>浏览记录</p>
             <van-icon name="arrow" size="20"/>
           </div>
         </div>
       </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Mine'
}
</script>

<style scoped lang="less">
  .head {
    width: 100%;
    height: 1.36rem;
    background: #F37D0F;
    display: flex;

    h2 {
      width: 0.86rem;
      height: 0.86rem;
      border-radius: 50%;
      background: #F8B16F;
      margin-left: 0.4rem;
      margin-top: 0.25rem;
      margin-right: 0.2rem;
    }

    h1 {
      color: #ffff;
      font-size: 0.29rem;
      margin-top: 0.5rem;
    }
  }
  .order {
    width: 100%;
    height: 2.54rem;
    background: #fff;
    .order-text {
      height: 0.84rem;
      border-bottom: 2px solid #D9D9D9;
      display: flex;
      justify-content: space-between;

      p {
        font-size: 0.28rem;
        color: #212121;
        line-height: 0.84rem;
        margin-left: 0.4rem;
      }

      div {
        color: #212121;
        line-height: 0.84rem;
        display: flex;

        h1 {
          font-size: 0.26rem;
          color: #212121;
          margin-left: 0.2rem;
        }

        img {
          width: 0.2rem;
          height: 0.35rem;
          margin-right: 0.1rem;
          margin-top: 0.23rem;
          margin-left: 0.1rem;
        }
      }
    }
    .order-con {
      height: 1.6rem;
      display: flex;
      justify-content: space-around;

      li {
        margin-top: 0.5rem;
        font-size: 0.2rem;

        i {
          text-align: center;
          display: block;
          margin-bottom: 0.1rem;
        }

        p {
          text-align: center;
        }
      }
    }
  }
  .list {
    width: 100%;
    height: 1.81rem;
    background: #fff;
    margin-top: 0.3rem;
    .list-icon {
      width: 100%;
      height: 50%;
      display: flex;

      i {
        display: block;
        margin-bottom: 0.1rem;
        margin-top: 0.28rem;
        margin-left: 0.3rem;
      }

      .list-con {
        width: 90%;
        border-bottom: 2px solid #D9D9D9;
        display: flex;
        justify-content: space-between;
        margin-left: 0.2rem;

        p {
          margin-top: 0.3rem;
          font-size: 0.28rem;
          color: #000000;
        }
      }
    }
  }
  .list-icon1 {
    width: 100%;
    height: 50%;
    display: flex;

    i {
      display: block;
      margin-bottom: 0.1rem;
      margin-top: 0.28rem;
      margin-left: 0.3rem;
    }

    .list-con {
      width: 90%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      margin-left: 0.2rem;
      background: #FFFFFF;
      p {
        margin-top: 0.3rem;
        font-size: 0.28rem;
        color: #000000;
      }
    }
  }
  .list1 {
    width: 100%;
    height: 0.8rem;
    background: #fff;
    margin-top: 0.3rem;
    .list-icon {
      width: 100%;
      height: 50%;
      display: flex;
      i {
        display: block;
        margin-bottom: 0.1rem;
        margin-top: 0.2rem;
        margin-left: 0.3rem;
      }

      .list-con {
        width: 90%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        margin-left: 0.2rem;

        p {
          margin-top: 0.2rem;
          font-size: 0.28rem;
          color: #000000;
        }
      }
    }
  }
</style>
